// npm i style-loader css-loader -D
// npm i html-webpack-plugin -D
// npm i webpack-dev-server -D
// npm i file-loader url-loader -D
// npm i mini-css-extract-plugin -D 
// npm i css-minimizer-webpack-plugin -D 
// npm i terser-webpack-plugin -D
// npm i clean-webpack-plugin -D
var HtmlWebpackPlugin = require('html-webpack-plugin'); //导入插件
const path = require('path'); //导入 path 路径处理模块
var MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css抽出
var CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
var TerserWebpackPlugin = require('terser-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin') //清理dist目录
const {VueLoaderPlugin} = require('vue-loader');//导入vue的插件
module.exports = {
	// 优化选项
	optimization: { //优化选项
		splitChunks: {
			chunks: "all", //当当打包好的js文件太大分割为多个
		}, //把import 导入文件单独打包一个包
		minimizer: [
			// 优化css
			new CssMinimizerWebpackPlugin(),
			// 压缩js
			new TerserWebpackPlugin(),
		] // 实现优化    
	},

	// entry: './src/index.js', //入口
	entry: './src/main.js', //入口
	output: { //出口
		filename: "main-[contenthash:7].js", //文件名
		path: __dirname + "/dist" //文件夹
	},
	mode: 'development', //产品模式 production 开发模式 development 
	module: {
		rules: [
			{test:/\.vue/,use:["vue-loader"]},
			// loader css-loader让webpack拥有处理css的能力 
			// 遇到.css结尾的文件都使用这两个loader处理
			{
				test: /\.css/,
				use: [ /*"style-loader",*/ MiniCssExtractPlugin.loader, "css-loader"]
			},
			{
				test: /\.(png|jpeg|jpg|gif|svg|webp|ico)/,

				use: [{
					loader: "url-loader",
					options: {
						limit: 500, //当文件小于 5000 字节 转换为 base64格式（减少http请求次数）
						name: 'images/[name].[ext]' // [name]名称 [ext]后缀名
					},
				}]
			}
		]
	},
	plugins: [
		// 把template文件拷贝到dist目录并插入打包还要的js（main.js）
		new HtmlWebpackPlugin({
			template: './public/index.html'
		}),
		// 实例化css抽出插件
		new MiniCssExtractPlugin({
			filename: "style-[contenthash].css"
		}),
		// 
		new CleanWebpackPlugin(),
		// 使用vue的插件
		new VueLoaderPlugin()

	],
	devServer: {
		proxy: {}, //代理
		host: "localhost", //域名
		port: 8080, //端口号
		hot: true, //热更新
		open: true, //自动打开浏览器
	},
	resolve: {
		alias: {
			// 使用@符号作为src的别名，resolve合并 ,__dirname 当前文件所在的目录，
			"@": path.resolve(__dirname, './src')
		}
	},
	// 因为打包后的文件都一个压缩过后的js
	// 出错了，需要知道你是哪个文件哪一个行出错，方便调试
	// 错误代表与原代码有个一一对应关系
	devtool:'eval-cheap-source-map'

}
//概念 入口：从哪儿开始打包
// 出口：打包到哪儿
// 模式：产品/开发模式
// 进入项目目录 npx webpack
// npm run serve | npm run build
// npm start

// 不用vue的脚手架，你能自己大家一个vue的项目吗？
// 能
// 使用vue-loader加载.vue文件
// vue-style-loader 处理.vue里面css
// vue-template-compiler 处理 模板
// vue-hot-reload-api 处理热更新
//  安装个vue

